import React, { PropTypes } from 'react';

import './ErrorMessage.css';

/**
 * エラーメッセージ
 *   表示位置は props で style={{ bottom: '-30px', left: '10%' }} のように指定する
 * @param {Object} props message:エラーメッセージ, style:表示位置スタイル
 */
const ErrorMessage = ({ message, style }) => (
  <div className="ErrorMessage">
    <div className="errorContainer" style={style}>
      <div className="errorContent">
        {Array.isArray(message)
          ? message.map((msg, index) =>
              <p key={index}>{msg}</p>
            )
          : <p>{message}</p>}
      </div>
      <div className="errorArrow">
        {Array.from({length: 10}, (v, k) => k + 1).reverse().map((value) => (
          <div key={value} className={`line${value}`} style={{ width: `${value * 2 - 1}px`}} />
        ))}
      </div>
    </div>
  </div>
);

/*ErrorMessage.propTypes = {
  message: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
  style: PropTypes.object,
};*/

ErrorMessage.defaultProps = {
  message: '',
};

export default ErrorMessage
